<template>
  <div style="width: 100vh; height: 100vh">
    <div>
      题目完成后，提交一个PR上来（pull
      request，可以百度查下怎么提交），备注写上名字与电话
    </div>
    <br />
    <div style="margin-top: 20px">1.方法</div>
    <div>写一个方法，该方法返回当前时间并格式化为yyyy-MM-dd HH:mm:ss</div>
    <!-- 所用方法名：getTime() -->
    <p style="color: red">作答如下:</p>
    <button @click="getTime()">点击获取当前时间:{{ time }}</button>
    <br /><br /><br />
    <div style="margin-top: 20px">2.事件/变量/方法</div>
    <div>定义一个属性，通过 “-” “+” 按钮，修改该属性的值</div>
    <div>
      定义两个属性，每次点击 “-” “+”
      按钮，都会赋值这两个属性一个0-10之间的随机数，计算这两个属性的和
    </div>
    <div>示例：</div>
    <div>
      <button style="margin-right: 20px">-</button>{{ "value"
      }}<button style="margin: 0px 20px">+</button>{{ "b" }} + {{ "c" }} =
      {{ "d" }}
    </div>
    <!-- 所用方法名：add() -->
    <p style="color: red">作答如下:</p>
    <div>
      <span
        >初始值：<span class="number">{{ num2 }}</span></span
      >&nbsp;
      <button @click="add('+')" :class="active == '+' ? 'bgc' : ''">
        &nbsp;+&nbsp;</button
      >&nbsp;
      <button @click="add('-')" :class="active == '-' ? 'bgc' : ''">
        &nbsp;-&nbsp;</button
      >&nbsp;
      <span
        >随机数：<span class="number">{{ num1 }}</span></span
      >&nbsp;
      <span
        >结果:<span class="number">{{ sum }}</span></span
      >
    </div>
    <br /><br /><br />

    <div style="margin-top: 20px">3.自定义组件</div>
    <div>写一个简单的自定义组件，并引用</div>
    <div>实现组件方法与值的传递</div>
    <div>
      比如，将第二步中的按钮封装成一个组件使用，可以设置按钮宽高颜色，可以传递出按钮的点击事件
    </div>
    <!-- 所用方法名：call() -->
    <p style="color: red">作答如下:</p>
    <AddCom ref="son"></AddCom>
    <button @click="call()">我是父组件按钮</button>

    <br /><br /><br />
    <div style="margin-top: 20px">4.树形结构递归</div>
    <div>
      <div>有如下数据结构：</div>
      <div>
        type Tree = { name: string code: string children: Tree user: { name:
        string code: string } }
      </div>
      <div>
        请写一个方法将该数据结构中的user.code值改编为Tree.name + ':' +
        Tree.user.name
      </div>
      <div>示例：</div>
      <div>
        const data = [ { name: 'A', code: 'A', children: [], user: [ { name:
        'a', code: 'a' } ] } ]
      </div>
      <div>
        const returnData = [ { name: 'A', code: 'A', children: [], user: [ {
        name: 'a', code: 'A:a' } ] } ]
      </div>
      <!-- 所用方法名：tree() -->
      <p style="color: red">作答如下:</p>
      <h2>154行的tree方法就是作答</h2>
    </div>
  </div>
</template>

<script>
import AddCom from "./components/AddCom.vue";
export default {
  components: {
    AddCom,
  },
  data() {
    return {
      time: "", //当前时间
      sum: 0, //总数
      num1: 0, //随机数
      num2: 0, //初始数
      active: "", //激活类名
    };
  },

  methods: {
    //获取当前时间
    getTime() {
      setInterval(() => {
        let date = new Date();
        var fullYear = date.getFullYear();
        var month = date.getMonth() + 1;
        var _date = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (month < 10) {
          month = "0" + month;
        }
        if (_date < 10) {
          _date = "0" + _date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        this.time =
          fullYear +
          "-" +
          month +
          "-" +
          _date +
          " " +
          hours +
          ":" +
          minutes +
          ":" +
          seconds;
      }, 1000);
    },
    //计算方法
    add(item) {
      this.active = item;
      this.num2 = this.sum;
      this.num1 = Math.round(Math.random() * 10);
      item == "+" ? (this.sum += this.num1) : (this.sum -= this.num1);
    },
    //调用子子组件方法
    call() {
      this.$refs.son.pass();
    },
    //树状递归
    tree() {
      const tree = {
        name: "刘邦",
        code: "01",
        children: {
          name: "刘备",
          code: "02",
          children: {
            name: "刘翔",
            code: "03",
            children: null,
            user: {
              name: "C",
              code: "c",
            },
          },
          user: {
            name: "B",
            code: "b",
          },
        },
        user: {
          name: "A",
          code: "a",
        },
      };

      const dfs = function (tree) {
        if (!tree) {
          return;
        }
        tree.user.code = tree.name + ":" + tree.user.name;
        dfs(tree.children);
      };

      console.log(tree);

      dfs(tree);
      console.log(tree);
    },
  },
};
</script>

<style scoped>
.bgc {
  background-color: red;
}
button {
  text-align: center;
  line-height: 20px;
}
.number {
  margin: 0 10px;
  color: red;
  font-size: 18;
  font-weight: 700;
}
</style>
